<template>
  <div class="application-form-container">
    <div class="application-form">
      <div class="header-left">
        <router-link to="/main/renshi/jixiao" class="back-btn">
          <i class="el-icon-arrow-left"></i> 返回
        </router-link>
        <div class="save-info">
          <el-button type="primary" icon="el-icon-check" @click="saveForm">保存</el-button>
          <el-button type="info" icon="el-icon-printer" @click="printForm">打印</el-button>
        </div>
      </div>
      <h2 style="text-align: center;">文件新增/修订/废止申请单</h2>
      <table class="clauses-table">
        <tr>
          <td>
            <span>申请日期：</span>
          </td>
          <td title="双击可修改" colspan="2">
            <template v-if="editingFields.applyDate">
              <input type="date" v-model="applyDate" @blur="stopEditing('applyDate')">
            </template>
            <template v-else>
              <span @dblclick="startEditing('applyDate')">{{ applyDate }}</span>
            </template>
          </td>
          <td>
            <span>申请部门：</span>
          </td>
          <td title="双击可修改" colspan="2">
            <template v-if="editingFields.applyDepartment">
              <input type="text" v-model="applyDepartment" @blur="stopEditing('applyDepartment')">
            </template>
            <template v-else>
              <span @dblclick="startEditing('applyDepartment')">{{ applyDepartment }}</span>
            </template>
          </td>
          <td>
            <span>申请人：</span>
          </td>
          <td title="双击可修改" colspan="2">
            <template v-if="editingFields.applicant">
              <input type="text" v-model="applicant" @blur="stopEditing('applicant')">
            </template>
            <template v-else>
              <span @dblclick="startEditing('applicant')">{{ applicant }}</span>
            </template>
          </td>
        </tr>
        <tr>
          <td>
            <span>文件名称：</span>
          </td>
          <td title="双击可修改" colspan="3">
            <template v-if="editingFields.fileName">
              <input type="text" v-model="fileName" @blur="stopEditing('fileName')">
            </template>
            <template v-else>
              <span @dblclick="startEditing('fileName')">{{ fileName }}</span>
            </template>
          </td>
          <td>
            <span>文件编号：</span>
          </td>
          <td title="双击可修改" colspan="2">
            <template v-if="editingFields.fileNumber">
              <input type="text" v-model="fileNumber" @blur="stopEditing('fileNumber')">
            </template>
            <template v-else>
              <span @dblclick="startEditing('fileNumber')">{{ fileNumber }}</span>
            </template>
          </td>
          <td>
            <span>版本：</span>
          </td>
          <td title="双击可修改">
            <template v-if="editingFields.version">
              <input type="text" v-model="version" @blur="stopEditing('version')">
            </template>
            <template v-else>
              <span @dblclick="startEditing('version')">{{ version }}</span>
            </template>
          </td>
        </tr>
      </table>
      <table class="clauses-table">
        <thead>
          <tr>
            <td style="border-top: 0px;">
              <span>申请类别</span>
            </td>
            <td colspan="2" style="border-top: 0px;">
              <label><input type="radio" v-model="applyType" value="新增"> 新增</label>
              <label><input type="radio" v-model="applyType" value="修订"> 修订</label>
              <label><input type="radio" v-model="applyType" value="废止"> 废止</label>
            </td>
          </tr>
          <tr>
            <td>
              <span>申请原因</span>
            </td>
            <td colspan="2">
              <textarea v-model="applyReason"></textarea>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>具体条款</td>
            <td>原文件内容</td>
            <td>现文件内容</td>
          </tr>
          <tr>
            <td><input type="text" v-model="clauseItem.clause" /></td>
            <td><textarea v-model="clauseItem.originalContent"></textarea></td>
            <td><textarea v-model="clauseItem.currentContent"></textarea></td>
          </tr>
        </tbody>
      </table>
      <table class="clauses-table">
        <tr>
          <th colspan="5" style="border-top: 0px;">
            <span>会审意见</span>
          </th>
        </tr>
        <tr v-for="(opinion, index) in reviewOpinionList" :key="index">
          <td class="department-cell">
            <label><input type="checkbox">{{ opinion.department }}</label>
          </td>
          <td colspan="4">
            <span style="display: flex;margin-left: 30px;">
              <label><input type="radio" v-model="opinion.approve" value="同意"> 同意</label>&emsp;&emsp;
              <label><input type="radio" v-model="opinion.approve" value="不同意"> 不同意</label>
            </span><br>
            <span style="display: inline-flex; ">主要意见是：
              <textarea rows="5" cols="100" v-model="opinion.comment"></textarea></span><br>
            <span style="display: flex;
    align-items: center;
    justify-content: flex-end;padding: 10px 0px;">
              <span>会审人：</span>
              <input type="text" v-model="opinion.reviewer">
              <span>日期：</span>
              <input type="date" v-model="opinion.date">
            </span>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <span class="explanation">
              <span>说明：1、各会审人需在两个工作日内回复，未作回复则视同认可。2、表单不用经各会审意见。</span>
            </span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DocumentApplicationForm',
  data() {
    return {
      applyDate: '2014年11月15日',
      applyDepartment: '企业管理部',
      applicant: '沈珂琪',
      fileName: '绩效考核实施细则',
      fileNumber: 'AM-A-JY-38',
      version: 'B/0',
      applyType: '修订',
      applyReason: '增强其文件的适宜性。',
      clauseItem: {
        clause: '',
        originalContent: '',
        currentContent: ''
      },
      reviewOpinionList: [
        { department: '总经理室', approve: '', comment: '', reviewer: '', date: '' },
        { department: '管理者代表', approve: '', comment: '', reviewer: '', date: '' },
        { department: '企业管理部', approve: '', comment: '', reviewer: '', date: '' },
        { department: '财务管理部', approve: '', comment: '', reviewer: '', date: '' },
        { department: '工会', approve: '', comment: '', reviewer: '', date: '' },
        { department: '手机事业部', approve: '', comment: '', reviewer: '', date: '' },
        { department: '光电事业部', approve: '', comment: '', reviewer: '', date: '' },
      ],
      editingFields: {
        applyDate: false,
        applyDepartment: false,
        applicant: false,
        fileName: false,
        fileNumber: false,
        version: false
      }
    };
  },
  methods: {
    startEditing(field) {
      this.editingFields[field] = true;
    },
    stopEditing(field) {
      this.editingFields[field] = false;
    },
    printForm() {
      window.print()
    },
    saveForm() {
      console.log('保存文件申请单', {
        applyDate: this.applyDate,
        applyDepartment: this.applyDepartment,
        applicant: this.applicant,
        fileName: this.fileName,
        fileNumber: this.fileNumber,
        version: this.version,
        applyType: this.applyType,
        applyReason: this.applyReason,
        clauseItem: this.clauseItem,
        reviewOpinionList: this.reviewOpinionList
      });
    }
  }
};
</script>

<style scoped lang="scss">
.application-form-container {
  font-family: '宋体', sans-serif;
  padding: 20px;
}

.application-form {
  width: 1200px;
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #409EFF;

  i {
    font-size: 20px;
    color: #409EFF;
  }

  a.back-btn.router-link-active {
    color: #409EFF;
    display: flex;
    align-items: center;
  }
}

.form-info {
  display: flex;
  margin-bottom: 15px;
}

.info-item {
  margin-right: 30px;
}

.apply-details {
  margin-bottom: 15px;
}

.category,
.reason {
  margin-bottom: 10px;
}

.clauses-table {
  width: 100%;
  border-collapse: collapse;
  /* margin-bottom: 15px; */
}

.clauses-table th,
.clauses-table td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}

.review-opinions {
  margin-bottom: 15px;
}

.opinion-item {
  margin-bottom: 10px;
}

.explanation {
  margin-bottom: 15px;
}

.save-info {
  margin-top: 15px;
}

.save-info button {
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.department-cell {
  width: 200px;
}

@media print {
  .application-form {
    width: 1000px;
    margin: 0px;
  }

  .header-left {
    display: none;
  }

  .department-cell {
    width: 100px;
  }

  table {
    margin: 0px 0px;
  }

  .info-table,
  .content-table,
  .approval-table {
    border: 1px solid #000;

    td,
    th {
      border: 1px solid #000;
    }
  }

  td,
  th {
    padding: 5px;
    border: 1px solid #000;
  }

  input {
    border: none !important;
    background-color: transparent !important;
    text-align: center;
  }

  textarea {
    border: 0px !important;
    width: 80%;
    padding: 5px;
    height: 50px;
    max-height: 900px;
  }
}
</style>